<!DOCTYPE html>
<html>
<head>
    <title>详情展示</title>
    {% include 'admin/common/header.html' %}
</head>
<body>
<form class="layui-form" action="">
    <div class="mainBox">
        <div class="main-container"
             style="margin-top: 10px;font-size: 35px;color: #5e5e5e;font-weight: bold;text-align: center;width: 100%">{{ course.course_name }}</div>
        <div class="main-container" style="height: 270px;margin-top: 15px">
            <div class="layui-card" style="width: 50%;float:left; overflow:hidden">
                <div class="layui-card-header"></div>
                <div class="layui-card-body">
                    <table class="layui-table" lay-skin="line" ,style="min-height:500px">
                        <thead>
                        <tr>
                            <th>属性</th>
                            <th>值</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>训练时间</td>
                            <td>{{ result.train_time }}</td>
                        </tr>
                        <tr>
                            <td>课程名称</td>
                            <td>{{ course.course_name }}</td>
                        </tr>
                        <tr>
                            {#                       {{ user_id }}#}
                            <td>动作描述</td>
                            <td>{{ course.course_description }}</td>
                        </tr>
                        <tr>

                            <td>警员编号</td>
                            <td>{{ police.code }}</td>
                        </tr>
                        <tr>
                            <td>警员名称</td>
                            <td>{{ police.name }}</td>
                        </tr>
                        <tr>
                            <td>职位</td>
                            <td>{{ police.post }}</td>
                        </tr>
                        <tr>
                            <td>警衔</td>
                            <td>{{ police.title }}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="layui-card" style="width: 45%;float:left; margin-left:10px;display:inline; overflow:hidden;">
                <div class="layui-card-header">考核评价</div>
                <div class="layui-card-body">
                    <div style="width: 100%;height: 205px;margin-left: 20px">
                        <img src="/static/images/medal.jpeg"
                             style="width: 35%;height: 100%;float:left; overflow:hidden">
                        <p style="font-weight: bold;font-size: 25px;color: #565c70;float:left; margin-left:20px;display:inline; overflow:hidden;margin-top:65px">
                            训练评估：{{ result.grade }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="main-container">
            <div class="layui-card">
                <div class="layui-card-header">课程信息</div>
                <div class="layui-card-body">
                    <table class="layui-table" lay-skin="line" ,style="min-height:500px">
                        <thead>
                        <tr>
                            <th>属性</th>
                            <th>值</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>课程名称</td>
                            <td id="course_name">{{ course.course_name }}</td>
                        </tr>
                        <tr>
                            <td>课程描述</td>
                            <td id="course_description">{{ course.course_description }}</td>
                        </tr>
                        <tr>
                            <td>课程时长(ms)</td>
                            <td id="course_length">{{ course.course_length }}(ms)</td>
                        </tr>
                        <tr>
                            <td>课程创建时间</td>
                            <td id="course_loadtime">{{ course.course_loadtime }}</td>
                        </tr>
                        <tr>
                            <td>课程更新时间</td>
                            <td id="course_updatetime">{{ course.course_updatetime }}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {#        <div class="main-container">#}
        {#         <div id="score_1" style="background-color:#ffffff;min-height:500px;padding: 10px"></div>#}
        {#        </div>#}

    </div>

</form>
{% include 'admin/common/footer.html' %}

<script>


    layui.use(['layer', 'echarts', 'element', 'count'], function () {
        var chartDom = document.getElementById('score_1');
        var myChart = echarts.init(chartDom);
        var option;

        setTimeout(function () {
            option = {
                legend: {},
                tooltip: {
                    trigger: 'axis',
                    showContent: false
                },
                dataset: {
                    source: [
                        ['时长', '10分', '20分', '30分', '40分', '50分', '60分'],
                        ['血氧采集与评估', 5, 8, 8, 7, 5, 8],
                        ['血压采集与评估', 5, 5, 5, 5, 7, 6],
                        ['呼吸与心率采集与评估', 4, 6, 6, 3, 4, 3],
                        ['温度采集与评估', 2, 3, 4, 1, 3, 4]
                    ]
                },
                xAxis: {type: 'category'},
                yAxis: {gridIndex: 0},
                grid: {top: '55%'},
                series: [
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: {focus: 'series'}
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: {focus: 'series'}
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: {focus: 'series'}
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: {focus: 'series'}
                    },
                    {
                        type: 'pie',
                        id: 'pie',
                        radius: '30%',
                        center: ['50%', '25%'],
                        emphasis: {
                            focus: 'self'
                        },
                        label: {
                            formatter: '{b}: {@1月} ({d}%)'
                        },
                        encode: {
                            itemName: '训练科目',
                            value: '1月',
                            tooltip: '1月'
                        }
                    }
                ]
            };
            myChart.on('updateAxisPointer', function (event) {
                const xAxisInfo = event.axesInfo[0];
                if (xAxisInfo) {
                    const dimension = xAxisInfo.value + 1;
                    myChart.setOption({
                        series: {
                            id: 'pie',
                            label: {
                                formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                            },
                            encode: {
                                value: dimension,
                                tooltip: dimension
                            }
                        }
                    });
                }
            });
            myChart.setOption(option);
        });

        option && myChart.setOption(option);
    })


</script>
</body>
</html>